<template>
    <div class="troch" v-cloak>
    <!-- 服务机构 -->
    <div  >
            <transition name="Xslide-fade" >
            <div class="container" v-if="Navigation">
                    <ul class="orid clearfix" style="top:auto" >
                      <li>
                        <img src="../../../static/images/cjzx.png" alt="" /><a>集采中心</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/csfw.png" alt="" /><a>财税服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/flfw.png" alt="" /><a>法律服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/rlzy.png" alt="" /><a>人力资源</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/lj.png" alt="" /><a>供应链服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/zx.png" alt="" /><a>集咨询管理</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/jr.png" alt="" /><a>金融服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/pg.png" alt="" /><a>评估认证</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/dn.png" alt="" /><a>专业技术</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/zh.png" alt="" /><a>综合服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                    </ul>
                  </div>
                  </transition>

        <div class="container main">
          <div class="posid"><p>您当前位置：服务超市>服务机构</p></div>
          <div class="hot_BJ">
          <div class="addlies XT ">
            <div class="contse ennis" :class="{bodyHeight:contentStatus}">
              <span>业务领域：</span>
              <ul class="amateur" >
                <li
                  v-for="(item,index) in Getfielddata"
                  :class="{'action':kongo===index}"
                  @click="speher(item,index)"
                >
                  {{ item.nr }}
                </li>
              </ul>
              </div>
              <span class="pointer"  v-if="Getfielddata.length>8" @click="changefield">{{selectfield?'更多∨':'收起∧'}}</span>
            
          </div>
          <div class="gured">
              <span>地&#x3000;&#x3000;区：</span>
              <input type="text" class="form-control" id="InputName" placeholder="请选择邻域"/>
            </div>
          </div>
          <div class="compos hot_BJ">
            <div class="keads">
              <span>排序：</span>
              <ul>
                <li
                  v-for="(item,index) in sortdata"
                  :class="{'action':sort===index}"
                  @click="sotser(item,index)"
                >
                  {{ item.nr }}
                </li>
              </ul>
            </div>
            <div class="hunt">
              <span>关键字：</span>
              <input type="text" class="form-control" id="InputName" />
              <button type="button" class="btn btn-primary">确定</button>
            </div>
          </div>
      
          <div class="election">
            <p>请选择您的企业特征，系统将自动为您推荐适合的服务机构</p>
          </div>
          <div class="industries hot_BJ">
            <transition name="Yslide-fade" >
            <div v-if="Features">
            <!-- 所属行业 -->
            <div class="addlies profession troy">
              
                <div class="ennis trade ">
                  <span>所属行业：</span>
                  <ul class="amateur" style="height: auto;">
                    <li
                      v-for="(item,index) in regiondata"
                      :class="{'action':indus===index}"
                      @click="industries(item,index)"
                    >
                      {{ item.nr }}
                    </li>
                  </ul>
                </div>
            
                <span class="pointer" v-if="region.length > 7" @click="changeindustries">{{selectindustries?'更多∨':'收起∧'}}</span>
              </div>
            <!-- 发展阶段 -->
    
              <div class="addlies profession">
                  <div class="ennis trade">
                    <span>发展阶段：</span>
                    <ul class="amateur" style="height: auto;">
                      <li
                        v-for="(item,index) in developmentdata"
                        :class="{'action':stes===index}"
                        @click="stage(item,index)"
                      >
                        {{ item.nr }}
                      </li>
                    </ul>
                  </div>
                  <span class="pointer" v-if="developmentdata.length > 4" @click="changestage">{{selectstage?'更多∨':'收起∧'}}</span>
                </div>
            <!-- 企业性质 -->
         
              <div class="addlies profession  future">
                  <div class="ennis trade ">
                    <span>企业性质：</span>
                    <ul class="amateur" style="height: auto;">
                      <li
                        v-for="(item,index) in devntdata"
                        :class="{'action':ters===index}"
                        @click="terprise(item,index)"
                      >
                        {{ item.nr }}
                      </li>
                    </ul>
                  </div>
                  <span class="pointer" v-if="devnt.length > 7" @click="changeterprise">{{selectterprise?'更多∨':'收起∧'}}</span>
                </div>
            <!--  -->
            </div>
            </transition>
            <!-- 按钮 -->
            <p class="gotten">
                <button class="btn btn-default" @click="Features=!Features" >{{Features?'收起':'更多'}}</button>
            </p>
            <!--  -->
         </div>
          <div class="prici" v-for="(item,index) in mationdata">
            <div>
              <img src="../../../static/images/201904.png" alt="..." class="img-responsive" />
            </div>
            <div class="sbject hot_BJ">
              <div class="hoters">
                <p>
                  <span class="ho_top">{{ item.hhr }}</span>
                  <span :class="item.rz? 'stays' : ''">{{ item.rz }}</span>
                  <span :class="item.rz? 'card' : ''">{{ item.hyjg }}</span>
                </p>
                <p class="minute variety">
                  <span>电话：{{ item.tel }}</span>
                  <span
                    >客户评价：<i>{{ item.khpj }}</i></span
                  >
                  <span>
                    累计<i>{{ item.jy }}</i
                    >笔交易</span
                  >
                </p>
                <p class="addressD text-overflow">地址：{{ item.address }}</p>
                <p class="minute">
                  <span>态度：({{ item.dt }})</span>
                  <span>专业：({{ item.zy }})</span>
                  <span>响应：({{ item.xy }})</span>
                  <span>价格：({{ item.jg }})</span>
                </p>
              </div>
              <div class="degs">
                <button class="btn btn-default" @click="release_demand">写需求</button>
                <br />
                <button class="btn btn-default">写评论</button>
              </div>
            </div>
          </div>
          <div class="greds"></div>
        </div>
      </div>
      
        <!--  -->
     
        </div>
   </template>
    <script>
    import headlogin from '../../views/localPage/headlogin'
         export default{
       
        data(){
            return{
               // 收起更多状态值
            selectterprise:false,
            selectstage:false,
            selectindustries:false,
            contentStatus: false,
            selectfield:false,
            brandFold: true,
             // 收起更多状态值

            cur: 2,//导航栏的默认光标
              //选择项默认光标
            indus:0,
            stes:0,
            ters:0,
            sort: 0,
            kongo: 0,
            contact: 0,
              //选择项默认光标

            Navigation:false,//服务分类的隐藏显示

            Features:true,//企业特征收起更多状态值


           
            navD: [
              { id: 1, zt: "首页" },
              { id: 2, zt: "采集中心" },
              { id: 3, zt: "服务机构" },
              { id: 4, zt: "服务顾问" },
              { id: 5, zt: "关于我们" }
            ],
        
        
            fielddata: [
              { id: "1", nr: "不限" },
              { id: "2", nr: "财税服务 " },
              { id: "3", nr: "法律服务  " },
              { id: "4", nr: "人力资源" },
              { id: "5", nr: "知识产权 " },
              { id: "6", nr: "供应链服务" },
              { id: "7", nr: "管理咨询" },
              { id: "8", nr: "金融服务" },
              { id: "9", nr: "评估认证" },
              { id: "10", nr: "专业技术" },
              { id: "11", nr: "综合服务" }
            ],
            // 排序
            sortdata: [
              { id: "1", nr: "综合" },
              { id: "2", nr: "人气 " },
              { id: "3", nr: "好评" },
              { id: "4", nr: "服务质量" }
            ],
            mation: [
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "已认证",
                ssjg: "苏州中合会计师事务所（普通合伙）",
                ywcz: "税收筹划及抗诉,内控咨询,新三版财务规范",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              },
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "",
                ssjg: "苏州中合会计师事务所（普通合伙）",
                ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              },
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "",
                ssjg: "苏州中合会计师事务所（普通合伙）",
                ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              },
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "已认证",
                ssjg: "苏州中合会计师事务所（普通合伙）",
                ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              }
            ],
        
            // 业务
            areadata: [
              { id: "1", nr: "不限" },
              { id: "2", nr: "财税服务 " },
              { id: "3", nr: "法律服务  " },
              { id: "4", nr: "人力资源" },
              { id: "5", nr: "知识产权 " },
              { id: "6", nr: "供应链服务" },
              { id: "7", nr: "管理咨询" },
              { id: "8", nr: "金融服务" },
              { id: "9", nr: "评估认证" },
              { id: "10", nr: "专业技术" },
              { id: "11", nr: "综合服务" }
            ],
            // 所属行业
            region: [
              { id: "1", nr: "不限" },
              { id: "2", nr: "人工智能" },
              { id: "3", nr: "生物医药" },
              { id: "4", nr: "纳米技术" },
              { id: "5", nr: "互联网" },
              { id: "6", nr: "与移动互联网" },
              { id: "7", nr: "现代装备与先进制造 " },
              { id: "8", nr: "新能源与节能环保" },
              { id: "9", nr: "评估认证" },
              { id: "10", nr: "专业技术" },
              { id: "11", nr: "综合服务" }
            ],
            // 发展阶段
            development: [
              { id: "1", nr: "不限" },
              { id: "2", nr: "筹建期 " },
              { id: "3", nr: "初创期" },
              { id: "4", nr: "成熟期（上市前）" },
              { id: "5", nr: "成熟期（已上市）" }
            ],
            //企业性质
            devnt: [
              { id: "1", nr: "不限" },
              { id: "2", nr: "外资" },
              { id: "3", nr: "合资" },
              { id: "4", nr: "国企" },
              { id: "5", nr: "民营公司" },
              { id: "6", nr: "上市公司" },
              { id: "7", nr: "创业公司 " },
              { id: "8", nr: "外企代表处" },
              { id: "9", nr: "行政机关/事业单位" }
            ],
            mationdata: [
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "已认证",
                hyjg: "会员机构",
                tel: "0512-62550288",
                address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              },
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "已认证",
                hyjg: "会员机构",
                tel: "0512-62550288",
                address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              },
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "已认证",
                hyjg: "会员机构",
                tel: "0512-62550288",
                address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              },
              {
                hhr: "王振英/ 合伙人、主任会计师",
                rz: "已认证",
                hyjg: "会员机构",
                tel: "0512-62550288",
                address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
                khpj: "★★★★★",
                jy: "19",
                dt: "5",
                zy: "5",
                xy: "5",
                jg: "5"
              }
            ],
            aboutDta: [
              { id: 1, title: "超市介绍" },
              { id: 2, title: "会员权益" },
              { id: 3, title: "联系我们" }
            ]
            }
          },
          methods: {
            // 导航栏
            getItme: function(item, index) {
              this.cur = index;
              switch(index)
              {
                  case 0:
             
                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;
                  case 1:
           
                  this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                  break;
                  case 2:
              
                    this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                  break;
                  case 3:
                  
                    this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                  break;
                  case 4:
                  
                    this.$router.push({ path:'/ServiceSupermarket/About'})
                  break;
              }
             
            },
           
 
           
                // 服务机构
                // 业务领域
                changefield:function(){

                    this.selectfield= !this.selectfield;
                },

                // 所属行业
                changeindustries:function(){
                    
                    this.selectindustries = !this.selectindustries;
                },
                // 发展阶段
                changestage:function(){
                this.selectstage = !this.selectstage;
                },
                // 企业性质
                changeterprise:function(){
                this.selectterprise= !this.selectterprise;
                },
                // 所属行业
                industries:function(item,index){
                    this.indus=index
                },
                // 发展阶段
                stage:function(item,index){
                this.stes=index
                },
                // 企业性质
                terprise:function(item,index){
                    this.ters=index
                },
                  //领域
                speher: function(item, index) {
                    this.kongo = index;
                },
                //排序
                sotser:function(item, index){
                    this.sort=index;

                },
                release_demand(){
                  this.$router.push({path:'/ServiceSupermarket/CreateDemand',query:{test:2}})
                },

          },
          computed: {
               //  服务机构
                // 所属行业
                regiondata:{
                  
                get: function() {
                    
                    if (this.selectindustries) {
                    if (this.region.length <8) {
                        return this.region;
                    }
                    let newArr = [];
                    for (var i = 0; i < 7; i++) {
                        let item = this.region[i];
                        newArr.push(item);
                    }
                    return newArr;
                    }
                    return this.region;
                },
                set: function(val) {
                    this.regiondata = val;
                }
                },
                // 发展阶段
                developmentdata:{
                    get: function() {
                    if (this.selectstage) {
                        if (this.development.length <8) {
                        return this.development;
                        }
                        let newArr = [];
                        for (var i = 0; i < 7; i++) {
                        let item = this.development[i];
                        newArr.push(item);
                        }
                        return newArr;
                    }
                    return this.development;
                    },
                    set: function(val) {
                    this.developmentdata = val;
                    }
                },
                    // 企业性质
            devntdata:{
                get: function() {
                    if (this.selectterprise) {
                    if (this.devnt.length <8) {
                        return this.devnt;
                    }
                    let newArr = [];
                    for (var i = 0; i < 8; i++) {
                        let item = this.devnt[i];
                        newArr.push(item);
                    }
                    return newArr;
                    }
                    return this.devnt;
                },
                set: function(val) {
                    this.devntdata = val;
                }
              },

              //业务领域
              Getfielddata:{
                
                get:function(){
                    
                    if(this.selectfield){
                        if (this.areadata.length <9) {
                            return this.areadata;
                        }
                        let newArr = [];
                            for (var i = 0; i < 9; i++) {
                                let item = this.areadata[i];
                                newArr.push(item);
                            }
                            return newArr;
                    }
                    return this.areadata;
                },
                set: function(val) {
                    this.Getfielddata = val;
                }
              
              },


          },
          components:{headlogin}
        };
        
        
        
        </script>
<style scoped>
.posid{
  padding:50px 0 20px 0;
}
.posid p{
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 22px;
	letter-spacing: 1px;
	color: #999999;
}
.addlies{
  height: auto;
}
.XT{
  border-bottom: 1px solid #e0e0e0;
}
.gured{
  width: 40%;
  display: flex;
  align-items: center;
  height: 100px;
  padding-left: 40px;
}
.gured>span{
  width: 138px;
  display: inline-block;
}
.addlies>span{
  display: inline-block;
  height: 60px;
  line-height: 60px;
  color: #0060ff;
}
.addlies,.compos,.keads,.contse{
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.addlies{
  padding-bottom: 0;
}
.contse{
  width: 90%;
  padding-bottom: 0;
}
.contse .field{
  width: 94%;
}
.contse span{
  display: inline-block;
  width: 60px;
}
.contse ul li,.compos ul li{
  float: left;
  display: inline-block;
  width: 90px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-bottom: 5px;
}

.compos{
  height: 60px;
  margin: 20px 0 30px 0;
  line-height: 60px;
  align-items: center;

}
.greds{
  height: 150px;
}
.greds .pagination{
  justify-content: flex-end;
}
.greds .pagination li{
  margin-left: 10px;
  width: 26px;
	height: 25px;
	box-shadow: 0px 1px 1px 0px 
		rgba(0, 0, 0, 0.12);
	border-radius: 3px;
  border: solid 1px #1575f9;
  text-align: center;
}
.currpage{
  background-color: #0060ff;
  color: white;
}
.compos ul li{
  margin-top: 15px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.action{
  background-color: #0060ff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
.prici{
  margin-bottom: 20px;
 position: relative;
}
.sbject{
  position: absolute;
  right:0;
  top: 20px;
  z-index:1;
  height: 234px;
  width: 73%;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hoters{
  width: 80%;
}
.hoters .ho_top{
  width: 266px;
	height: 20px;
  font-size: 20px;
	font-weight:600;
	line-height: 24px;
	letter-spacing: 1px;
	color: #000000;
}
.stays,.card{
  margin-left: 15px;
  display: inline-block;
  padding: 5px 10px 5px 10px;
	border-radius: 4px;
  border: solid 1px #379aff;
  text-align: center;
}
.stedg{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 20px;
}
.stedg span:last-child,.variety{
  font-size: 12px;
	line-height: 32px;
	letter-spacing: 1px;
	color: #666666;
}
.stedg i{
	letter-spacing: 1px;
  color: #0060ff;
  font-style: normal;
}
.minute span{
  margin-right:10px;
}
.minute i{
  color: #0060ff;
  font-style: normal;
}
.degs button{
  margin-bottom: 10px;
}
.btn-default{
  background: white;
}
.btn-default,.btn-primary{
  border-color: #0060ff;
}
.btn-default:hover,.btn-primary{
  background-color:#0060ff;
  color: white;
}
.hunt{
  width: 40%;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.hunt .form-control{
  width: 55%;
  margin-right: 30px;
}
.election{
  width: 100%;
  text-align: center;
  font-size: 16px;
	line-height: 32px;
	letter-spacing: 1px;
	color: #999999;
}
 .card{
  border: solid 1px #fd7714;
}
.variety span:last-child{
  margin-left:100px;
}
.ennis>span{
  width: 110px;
}
.addlies .amateur{
  width: 90%;
}
.industries .trade{
  display: flex;
  justify-content: space-between;
  margin: 0px 0 9px 0;
  align-items: flex-start;
  line-height: 60px;
  width: 90%;
}
.industries .profession{
  padding: 0;
}
.industries .troy{
   border-bottom: 1px solid #e0e0e0;
}
.industries .future,.gotten{
  border-top: 1px solid #e0e0e0;
}
.industries .trade ul{
  height: 100%;
  margin: 18px 0 0 0;
}
.industries .trade ul li {
  padding: 0 18px;
  float: left;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
.profession{
  width: 95%;
  margin-left: 40px;
  margin-right: 70px;
  
}
.gotten{
  width: 95%;text-align: center;
  height: 100px;
  padding-top: 40px;
  margin-left: 40px;
}
.gotten button{
  color: #0060ff;
  width: 100px;

}
.profession>span{
  width: 110px;
  text-align: right;
}
.industries .trade span{
  width: 110px;
}
</style>
